<template>
    <div class="global">
        <el-container class="global-contain">
            <el-header>
                <div class="head">
                    <div class="headtitle">且听风吟咖啡</div>
                    <div>
                        <img v-if="user.icon == null" src="../assets/logo.png"
                            style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;"
                            alt="" srcset="">
                        <img v-else :src="user.icon"
                            style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;"
                            alt="" srcset="">

                        <el-dropdown>
                            <span class="el-dropdown-link" style="color: #fff;">
                                {{ user.nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="personal()">个人信息</el-dropdown-item>

                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-container class="contain">
                <el-aside width="200px" class="aside">
                    <el-menu :default-active="$route.path" router class="el-menu-demo menu">
                        <el-menu-item index="/shophome"> <i class="el-icon-s-home menuicon"></i>系统首页</el-menu-item>
                        <el-submenu index="2" v-if="user.certified == '已认证'">
                            <template slot="title"> <i class="el-icon-user menuicon"></i>信息管理</template>
                            <el-menu-item index="/stype">咖啡分类</el-menu-item>
                            <el-menu-item index="/sinfo">咖啡信息</el-menu-item>
                            <el-menu-item index="/sorder">咖啡订单</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<script>
import service from "../request"
export default {
    data() {
        return {
            user: {}
        }
    },
    mounted() {
        // this.user = JSON.parse(window.localStorage.getItem("userinfo"))
        this.getuser()
    },
    methods: {
        async getuser() {
            const res = await service.get("/account/shopinfo");
            console.log(res)
            this.user = res.data
        },
        personal() {

            this.$router.push({
                path: "/shopPersonal"
            })

        },
        updatepassword() {

            this.$router.push({
                path: "/password"
            })


        },
        logout() {
            window.localStorage.clear()
            this.$router.push({
                path: "/"
            })
        }
    }
}
</script>
<style>
.el-table thead tr th {
    background: #f8f8f8 !important;
}

.el-main {
    background: #f8f8ff !important;
}

.menu .el-submenu__title {
    color: #fff !important;
}

.menu .el-menu-item {
    color: #fff !important;
}

.menu .is-active {
    background: #ca7a33 !important;
}

.menu .el-submenu__title:hover {
    background: #ca7a33 !important;
}

.menu .el-menu-item:hover {
    background: #ca7a33 !important;
}

.menu {
    width: 100%;
    height: 100%;
    background: #824e1d !important;
}

.menu .el-menu {
    width: 100%;
    height: 100%;
    background: #824e1d !important;
}

.el-header {
    padding: 0px 20px !important;
    box-sizing: border-box;
    background: #824e1d;
}

.el-aside {
    overflow: hidden !important;

}
</style>
<style scoped>
.menuicon {
    color: #fff;
}

.contain {
    width: 100%;
    height: calc(100% - 60px);
}

.headtitle {
    font-weight: bold;
    color: #fff;
}

.head {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.global {
    width: 100%;
    height: 100%
}

.global-contain {
    width: 100%;
    height: 100%
}

.aside {
    height: 100%
}
</style>